<script>
export default {
  data() {
    return {
      id1: "id1",
      class1: "class1",
      many_prop: {
        class: "q",
        id: "w",
      },
      test_true: true,
      test_true_str: "true",
      test_false: false,
      test_null: null,
      test_undefined: undefined,
    };
  },
}
</script>

<template>
  <p v-bind:id="id1">绑定 id 属性</p>
  <p v-bind:class="class1">绑定 class 属性</p>
  <p v-bind:class1="class1">绑定 class 属性，但键为 class1</p>

  <p v-bind="many_prop">同时绑定多个属性，使用对象</p>

  <p :id="id1">使用冒号可以简写 v-bind ，即 v-bind: 可以写成 :</p>

  <p :class="test_true">当绑定的值为 null 或者 undefined 时，该属性值将被置空</p>
  <p :class="test_true_str">测试2</p>
  <p :class="test_false">测试3</p>
  <p :class="test_null">测试4</p>
  <p :class="test_undefined">测试5</p>
</template>